<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            1.基本用法
                绑定计算属性的方式和绑定普通属性是相同的
         -->
        <p>{{msg}}</p>
        <p>{{msg2}}</p>  

        <!-- 对数据进行处理再显示 -->
        <p>{{msg.split(' ').reverse().join(' ')}}</p> <!-- 缺点：插值表达式中放入太多的逻辑处理会混乱来清晰，且难以维护 -->
        <p>{{reverseMsg}}</p>
        <button @click="msg='i love you'">修改msg值</button>
        <hr>

        <!-- 
            2.get和set
         -->
        <p>{{num}}</p> 
        <p>{{myNum}}</p>
        <button @click="myNum=8">修改myNum值</button>
        <hr>

        <!-- 
            3.计算属性 vs 方法
                计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才会更新变化
                计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性返回的是之前缓存的计算结果，并不会多次执行get函数，性能较好
         -->
        <!-- <p>{{randomMsg}}</p>
        <p>{{randomMsg}}</p>
        <p>{{randomMsg}}</p> -->
        <p>{{randMsg()}}</p>
        <p>{{randMsg()}}</p>
        <p>{{randMsg()}}</p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{ // 普通属性
            msg:'welcome to vue',
            num:5
        },
        computed: { // 计算属性
            msg2:function(){  // 该函数必须有返回值，用来获取属性，称为get函数
                console.log('执行获取msg2');
                return '欢迎来到Vue';
            },
            reverseMsg:function(){
                // 可以包含逻辑处理代码，这里reverseMsg依赖于msg
                return this.msg.split(' ').reverse().join(' ');
            },
            myNum:{ // 同时指定get和set，以对象的形式配置
                get:function(){
                    console.log("获取myNum....");
                    return this.num*2;
                },
                set:function(val){
                    console.log("设置myNum...");
                    this.num=val; // 由于myNum依赖于num，所以给num赋值
                }
            },
            randomMsg:function(){
                console.log('randomMsg');
                return this.msg+Math.random();
            }
        },
        methods: {
            randMsg:function(){
                console.log('randMsg');
                return this.msg+Math.random();
            }
        },
    });
</script>
</html>